<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>HZ-Q01</title>
    <link rel="stylesheet" href="/assets/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="/assets/layui/css/modules/layim/layim.css">
    <link rel="stylesheet" href="/assets/style/admin.css">
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
    <script src="/assets/layui/layui.js"></script>
    <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
    <!--[if lt IE 9]>
    <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
    <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    <div class="layui-header">
        <div class="layui-logo"></div>
        <!-- 头部区域（可配合layui已有的水平导航） -->
        <ul class="layui-nav layui-layout-left">
            <li class="layui-nav-item"><a href="/cs_work/index">工作台</a></li>
            <li class="layui-nav-item"><a href="/cs_account/index">账号</a></li>
            <li class="layui-nav-item layui-hide-xs"><a href="/cs_login/logout">退出</a></li>
        </ul>
    </div><!-- 侧边菜单 -->
    <div class="layui-side layui-side-menu" style="height:100%;">
        <div class="layui-side-scroll">
            <ul class="layui-nav layui-nav-tree" id="LAY_wechat_nav" lay-filter="wechat-list" style="height:100%;">
                <li class="layui-nav-item layui-nav-itemed" style="height:100%;">
                    <a class="" href="javascript:;">
                        <i class="layui-icon layui-icon-login-wechat"></i>
                        <cite>微信</cite>
                    </a>
                    <dl class="layui-nav-child" style="height:400px;overflow: hidden;overflow-y:auto; " id="LAY_wechat_list">
                    </dl>
                </li>
            </ul>
        </div>
    </div>
    <!-- 内容主体区域 -->
    <div id="LAY_app_body" class="layui-body">
        <div class="layui-fluid" style="padding: 0;">
            <div class="layui-row">
                <div class="layui-col-md12">
                    <div class="layui-card">
                        <div class="layui-tab layui-tab-card LAY-chat-tab" lay-filter="wechat" lay-allowclose="true">
                            <ul class="layui-tab-title">
                            </ul>
                            <div class="layui-tab-content" id="LAY_wechat_content" style="display: block;padding: 0;">
                            </div>
                        </div>
                        <!-- 辅助元素，一般用于移动设备下遮罩 -->
                        <div class="layadmin-body-shade" layadmin-event="shade"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script id="tpl_wechat_board" type="text/html">
        <div class="layui-row layui-fluid" style="height:100%;padding: 0;" id="board{{ d.boardId }}">
            <div class="wechat_board_right" style="background: #f9f9f9;height:100%;border-style: solid;border-width: 1px;border-color:#dddddd;">
                <div class="wechat_board_right_friends" style="height:100%;display: none;">
                    <div class="wechat_board_right_friend_list" style="width:200px;float:left;background: #f9f9f9;height:100%;border-style: solid;border-width: 1px;border-color:#dddddd;overflow: hidden;">
                        <div class="layui-col-sm12 layui-col-space2" style="padding: 5px;background: #393D49;border-width: 1px;border-color:#dddddd;overflow: hidden;">
                            <div class="layui-input-inline">
                                <span style="text-align:center;cursor: pointer;padding:0 6px;" onclick="showChatWindow('board{{ d.boardId }}', {{ d.boardId }}, 1)"><i class="layui-icon layui-icon-dialogue board_swich_chat" style="font-size:28px; color:#5FB878;"></i></span>
                                <span style="text-align:center;cursor: pointer;padding:0 6px;" onclick="showFriends('board{{ d.boardId }}', {{ d.boardId }});"><i class="layui-icon layui-icon-friends board_swich_friend" style="font-size:28px; color:#c2c2c2;"></i></span>
                                <span style="text-align:center;cursor: pointer;padding:0 6px;"><i class="layui-icon layui-icon-note board_swich_tag" style="font-size:28px; color:#c2c2c2;" onclick="showTagWindow('board{{ d.boardId }}', {{ d.boardId }});"></i></span>
                                <span style="text-align:center;cursor: pointer;padding:0 6px;" onclick="showAddFriend({{ d.boardId }});"><i class="layui-icon layui-icon-add-1 board_add_friend" style="font-size:28px; color:#c2c2c2;"></i></span>
                            </div>
                        </div>
                        <div class="layui-col-sm12 layui-col-space2" style="padding: 5px;">
                            <div class="layui-input-inline">
                                <div class="layui-input-inline">
                                    <input type="text" name="search_friend" placeholder="搜索" autocomplete="off" class="layui-input" onchange="getFriends({{ d.boardId }}, true);" style="width:140px;">
                                </div>
                                <div class="layui-input-inline">
                                    <button class="layui-btn layui-btn-sm" onclick="getFriends({{ d.boardId }}, true);">搜索</button>
                                </div>
                            </div>
                        </div>
                        <div class="layui-col-sm12 layui-collapse" style="overflow: hidden;" lay-accordion>
                            <div class="layui-colla-item">
                                <h2 class="layui-colla-title stranger_tab">新朋友</h2>
                                <div class="layui-colla-content">
                                    <div class="layui-col-sm12 wechat_stranger_list" style="overflow: hidden;overflow-y:auto; ">
                                    </div>
                                </div>
                            </div>
                            <div class="layui-colla-item">
                                <h2 class="layui-colla-title">联系人</h2>
                                <div class="layui-colla-content layui-show">
                                    <div class="layui-col-sm12 wechat_friend_list" id="wechat_friend_list_{{ d.boardId }}" style="overflow: hidden;overflow-y:auto; ">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="wechat_board_right_friend_info" style="border-style: solid;border-width: 1px;border-right-color: #dddddd;border-left-color: #f9f9f9;border-bottom-color: #dddddd;border-top-color:#dddddd;height:100%;background: #f9f9f9;overflow: hidden;overflow-y:auto;">
                        <div class="layui-row layim-friend-info" style="height:100%;">
                            <i class="layui-icon layui-icon-login-wechat" style="font-size:60px; color:#f2f2f2;position: relative;top:50%;left:50%;"></i>
                        </div>
                    </div>
                </div>

                <div class="wechat_board_right_chat" style="height:100%;">
                    <div class="wechat_board_right_chat_friend" style="width:200px;float:left;background: #f9f9f9;height:100%;border-style: solid;border-width: 1px;border-color:#dddddd;">
                        <div class="layui-col-sm12 layui-col-space2" style="padding: 5px;background: #393D49;border-width: 1px;border-color:#dddddd;">
                            <div class="layui-input-inline">
                                <span style="text-align:center;cursor: pointer;padding:0 6px;" onclick="showChatWindow('board{{ d.boardId }}', {{ d.boardId }}, 1)"><i class="layui-icon layui-icon-dialogue board_swich_chat" style="font-size:28px; color:#5FB878;"></i></span>
                                <span style="text-align:center;cursor: pointer;padding:0 6px;" onclick="showFriends('board{{ d.boardId }}', {{ d.boardId }});"><i class="layui-icon layui-icon-friends board_swich_friend" style="font-size:28px; color:#c2c2c2;"></i></span>
                                <span style="text-align:center;cursor: pointer;padding:0 6px;"><i class="layui-icon layui-icon-note board_swich_tag" style="font-size:28px; color:#c2c2c2;" onclick="showTagWindow('board{{ d.boardId }}', {{ d.boardId }});"></i></span>
                                <span style="text-align:center;cursor: pointer;padding:0 6px;" onclick="showAddFriend({{ d.boardId }});"><i class="layui-icon layui-icon-add-1 board_add_friend" style="font-size:28px; color:#c2c2c2;"></i></span>
                            </div>
                        </div>
                        <div class="layui-col-sm12 layui-col-space2" style="padding: 5px;">
                            <div class="layui-input-inline">
                                <div class="layui-input-inline">
                                    <input type="text" name="search_chat" placeholder="搜索" autocomplete="off" class="layui-input" onchange="getChats({{ d.boardId }}, 1);" style="width:140px;">
                                </div>
                                <div class="layui-input-inline">
                                    <button class="layui-btn layui-btn-sm" onclick="getChats({{ d.boardId }}, 1);">搜索</button>
                                </div>
                            </div>
                        </div>
                        <div class="layui-col-sm12 wechat_chat_list" id="wechat_chat_list{{ d.boardId }}"  style="overflow: hidden;overflow-y:auto; ">
                        </div>
                    </div>
                    <div class="wechat_board_right_more_window" style="width:300px;height:100%;float:right;border-style: solid;border-width: 1px;border-right-color: #dddddd;border-left-color: #f9f9f9;border-bottom-color: #dddddd;border-top-color:#dddddd;background: #fff;overflow: hidden;display: none;">
                        <div class="layui-tab">
                            <ul class="layui-tab-title">
                                <li class="layui-this">客户资料</li>
                                <li id="snsTab_{{ d.boardId }}" name="snsTab" friend_id="" onclick="showSnsTabContent({{ d.boardId }});">朋友圈</li>
                                <li id="materialTab_{{ d.boardId }}" name="materialTab" friend_id="" onclick="showMaterialTabContent({{ d.boardId }});">快捷回复</li>
                            </ul>
                            <div class="layui-tab-content">
                                <div class="layui-tab-item layui-show">
                                    <div id="customer_info_panel_{{ d.boardId }}" class="customer_info_panel" style="overflow: hidden;overflow-y:auto;">
                                        <div class="layui-row">
                                            <fieldset class="layui-elem-field layui-field-title">
                                                <legend>客户资料</legend>
                                                <div class="layui-field-box layim-customer-info">

                                                </div>
                                            </fieldset>
                                        </div>
                                        <div class="layui-row">
                                            <fieldset class="layui-elem-field layui-field-title">
                                                <legend>标签</legend>
                                                <div class="layui-field-box layim-friend-tag">

                                                </div>
                                            </fieldset>
                                        </div>
                                    </div>
                                </div>
                                <div class="layui-tab-item">
                                    <div id="friend_sns_page_panel_{{ d.boardId }}" class="friend_sns_page_panel" style="overflow: hidden;overflow-y:auto;">
                                        <div id="friend_sns_page_{{ d.boardId }}"></div>
                                    </div>
                                </div>
                                <div class="layui-tab-item">
                                    <div id="quick_reply_groups_{{ d.boardId }}"></div>
                                    <hr>
                                    <div id="quick_reply_panel_{{ d.boardId }}" class="quick_reply_panel" style="overflow: hidden;overflow-y:auto;">
                                        <div id="quick_reply_{{ d.boardId }}"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="wechat_board_right_chat_window" style="border-style: solid;border-width: 1px;border-right-color: #dddddd;border-left-color: #f9f9f9;border-bottom-color: #dddddd;border-top-color:#dddddd;height:100%;background: #f9f9f9;overflow: hidden;overflow-y:auto;">
                        <div class="layui-col-sm12" style="height:100%;display: none;">
                            <i class="layui-icon layui-icon-login-wechat" style="font-size:60px; color:#f2f2f2;position: relative;top:50%;left:50%;"></i>
                        </div>

                        <div class="layui-row layim-chat-box" style="height:100%;">
                            <i class="layui-icon layui-icon-login-wechat" style="font-size:60px; color:#f2f2f2;position: relative;top:50%;left:50%;"></i>
                        </div>
                    </div>
                </div>

                <div class="wechat_board_right_tags" style="height:100%;display: none;">
                    <div class="wechat_board_right_tag_list" style="width:200px;float:left;background: #f9f9f9;height:100%;border-style: solid;border-width: 1px;border-color:#dddddd;overflow: hidden;">
                        <div class="layui-col-sm12 layui-col-space2" style="padding: 5px;background: #393D49;border-width: 1px;border-color:#dddddd;overflow: hidden;">
                            <div class="layui-input-inline">
                                <span style="text-align:center;cursor: pointer;padding:0 6px;" onclick="showChatWindow('board{{ d.boardId }}', {{ d.boardId }}, 1)"><i class="layui-icon layui-icon-dialogue board_swich_chat" style="font-size:28px; color:#c2c2c2;"></i></span>
                                <span style="text-align:center;cursor: pointer;padding:0 6px;" onclick="showFriends('board{{ d.boardId }}', {{ d.boardId }});"><i class="layui-icon layui-icon-friends board_swich_friend" style="font-size:28px; color:#c2c2c2;"></i></span>
                                <span style="text-align:center;cursor: pointer;padding:0 6px;"><i class="layui-icon layui-icon-note board_swich_tag" style="font-size:28px; color:#5FB878;" onclick="showTagWindow('board{{ d.boardId }}', {{ d.boardId }});"></i></span>
                                <span style="text-align:center;cursor: pointer;padding:0 6px;" onclick="showAddFriend({{ d.boardId }});"><i class="layui-icon layui-icon-add-1 board_add_friend" style="font-size:28px; color:#c2c2c2;"></i></span>
                            </div>
                        </div>
                        <div class="layui-col-sm12 layui-col-space2" style="padding: 5px;">
                            <div class="layui-input-inline">
                                <div class="layui-input-inline">
                                    <input type="text" name="search_tag" placeholder="搜索" autocomplete="off" class="layui-input" onchange="getTags({{ d.boardId }});" style="width:140px;">
                                </div>
                                <div class="layui-input-inline">
                                    <button class="layui-btn layui-btn-sm" onclick="getTags({{ d.boardId }}, true);">搜索</button>
                                </div>
                            </div>
                        </div>
                        <div class="layui-col-sm12 tag_list" id="tag_list_{{ d.boardId }}" style="overflow: hidden;overflow-y:auto; ">
                        </div>
                    </div>
                    <div class="wechat_board_right_tag_friend" style="border-style: solid;border-width: 1px;border-right-color: #dddddd;border-left-color: #f9f9f9;border-bottom-color: #dddddd;border-top-color:#dddddd;height:100%;background: #f9f9f9;overflow: hidden;overflow-y:auto;">
                        <div class="layui-row layim-tag-friend" id="tag_friend_list_{{ d.boardId }}"  style="height:100%;">
                            <table id="tag_friend_table_{{ d.boardId }}"></table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </script>
    <script id="tpl_chat_list" type="text/html">
        {{#  if(d.list.length>0){ }}
        {{#  layui.each(d.list, function(index, item){ }}
        <div class="layui-row layui-col-space5" style="margin:1px;background: #ffffff;" id="friend{{ item.friend_id }}" onclick="showChatRecords({{ item.wechat_id }}, {{ item.friend_id }}, '{{ item.friend_name }}', {{ item.friend_type }})">
            <div class="layui-col-sm3">
                {{#  if(item.friend_small_head_image){ }}
                <img src="{{ item.friend_small_head_image }}" style="width: 100%; height: 100%;">
                {{#  } else { }}
                <img src="/assets/images/default_head.jpeg" style="width: 100%; height: 100%;">
                {{#  } }}
            </div>
            <div class="layui-col-sm9" style="height: 100%;">
                <span style="float: left;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">{{ item.friend_name || item.friend_username }}</span>
                <span style="position: relative;float: right;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">{{ item.send_date.replace(/-/g, '/').substr(2, 8) }}</span>
                <span class="layui-form-mid layui-word-aux" style="width:90%;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">{{ item.content || '' }}</span>
            </div>
            <span class="layui-badge" style="display:none;position: absolute;top:0;right:0;z-index:999999;"></span>
        </div>
        {{#  }); }}
        {{#  } else { }}
        <div class="layui-row layui-col-space10" style="margin:1px;background: #ffffff;">
            <div class="layui-col-sm12">
                <span>无匹配记录</span>
            </div>
        </div>
        {{#  } }}
    </script>
    <script id="tpl_friend_list" type="text/html">
        {{#  if(d.list.length>0){ }}
        {{#  layui.each(d.list, function(index, item){ }}
        <div class="layui-row layui-col-space5" style="margin:1px;background: #f9f9f9;" id="{{ item.id }}" onclick="getFriendInfo({{ d.wechat_id }}, {{ item.id }})">
            <div class="layui-col-sm3">
                <img src="{{ item.small_head_image || '/assets/images/default_head.jpeg' }}" style="width: 100%; height: 100%;">
            </div>
            <div class="layui-col-sm9">
                <span>{{ item.remark || (item.name || item.username) }}</span>
            </div>
        </div>
        {{#  }); }}
        {{#  } else { }}
        <div class="layui-row layui-col-space10" style="margin:1px;background: #ffffff;">
            <div class="layui-col-sm12">
                <span>无匹配记录</span>
            </div>
        </div>
        {{#  } }}
    </script>
    <script id="tpl_chat_records" type="text/html">
        <div class="layim-chat layim-chat-friend layui-show" id="friendChat_{{ d.wechat_id }}_{{ d.friend_id }}" onclick="showDot(false, {{ d.wechat_id }}, {{ d.friend_id }})">
            <div style="height:15px;padding:10px;">
                <span>{{ d.friend_name }}</span>
            </div>
            <hr class="layui-bg-gray">
            <!--style="height: 200px;padding: 15px 15px 5px;overflow: hidden;"-->
            <div class="layim-chat-main" name="LAY_wechat_msg" id="friendChatRecord_{{ d.wechat_id }}_{{ d.friend_id }}">
                <div class="layui-flow-more">
                    <a class="load-more-message" href="javascript:;" onclick="getChatRecord({{ d.wechat_id }}, {{ d.friend_id }}, true);"><cite>加载更多</cite></a>
                    <span class="loading-more-message" style="display: none;"><i class="layui-icon layui-icon-loading layui-anim layui-anim-rotate layui-anim-loop" style="padding:0;font-size:30px;"></i></span>
                </div>
                <ul>
                </ul>
            </div>
            <div>
                <hr class="layui-bg-gray" style="margin: 0;">
                <div class="layui-unselect layim-chat-tool">
                    <span onclick="showEmojiPanel({{ d.wechat_id }}, {{ d.friend_id }});" title="表情"><i class="layui-icon layui-icon-face-smile-b" style="font-size: 25px;color: #666;"></i></span>
                    <span class="sendImg" title="图片" id="sendImg_{{ d.wechat_id }}_{{ d.friend_id }}"><i class="layui-icon layui-icon-picture" style="font-size: 25px;color: #666;"></i></span>
                    <!--                <span class="sendImg" title="图片" id="sendImg"><i class="layui-icon layui-icon-picture" style="font-size: 25px;color: #666;"></i></span>-->
                    <!--<span class="layim-tool-log" layim-event="chatLog"><i class="layui-icon layui-icon-log
    "></i>聊天记录</span>-->
                </div>
                <textarea placeholder="" class="layui-textarea new-chat-message" rows="8"></textarea>
                <div style="float: right;"><button class="layui-btn" onclick="sendMsg({{ d.wechat_id }}, {{ d.friend_id }})">回车发送</button></div>
            </div>
        </div>
    </script>
    <script id="tpl_msg" type="text/html">
        <li {{ d.msg.sender==1 || 'class="layim-chat-mine"' }} id="record_{{ d.msg.record_id }}">
        <div class="layim-chat-user">
            {{#  if(d.msg.sender==1){ }}
            <img src="{{ d.msg.friend_head || '/assets/images/default_head.jpeg' }}">
            <cite>
                {{ d.msg.friend_name }}
                <i>{{ d.msg.time }}</i>
            </cite>
            {{#  } else { }}
            <img src="{{ d.msg.wechat_head || '/assets/images/default_head.jpeg' }}">
            <cite>
                {{#  if(d.msg.status==1 || d.msg.status==2){ }}
                <i class="layui-icon layui-icon-loading layui-anim layui-anim-rotate layui-anim-loop" style="padding:0;"></i>
                {{#  } else if(d.msg.status==-1) { }}
                {{#  } }}
                <i class="msg_remark">
                    {{#  if(d.msg.status==-1 && d.msg.remark!=''){ }}
                    <i class="layui-icon layui-icon-tips" style="padding:0;color:red;"><label>{{ d.msg.remark }}</label></i>
                    {{#  } }}
                </i>
                <i>{{ d.msg.time }}</i>
                {{ d.msg.wechat_name }}
            </cite>
            {{#  } }}
        </div>
        <div class="layim-chat-text">
            {{#  if(d.msg.msg_type==1){ }}
            {{ parseEmotion(d.msg.content) }}
            {{#  } else if(d.msg.msg_type==2) { }}
            <div class="layui-unselect layui-layim-audio" layim-event="playAudio" data-src="/cs_work/getVoiceFile/{{ d.msg.wechat_id }}/{{ d.msg.record_id }}/{{ d.msg.material_id }}"><i class="layui-icon layui-icon-voice"></i></div>
            {{#  } else if(d.msg.msg_type==3) { }}
            {{# if (d.msg.mediaUrl2) { }}
            <img id="chatImg{{ d.msg.record_id }}" midimg="0" src="{{ d.msg.mediaUrl2 }}&type=MIDIMG" onclick="getMediaV2({{ d.msg.record_id }}, '{{ d.msg.mediaUrl2 }}&type={{ d.msg.bigImg }}', 'HDIMG');" style="cursor: pointer;width: 200px;">
            {{#  } else { }}
            <img id="chatImg{{ d.msg.record_id }}" midimg="0" src="data:image/png;base64,{{ d.msg.content }}" style="width: 250px;">
            {{#  } }}
            {{#  } else if(d.msg.msg_type==4) { }}
            <!--            <span style="cursor: pointer;" onclick="getMedia({{ d.msg.wechat_id }}, {{ d.msg.record_id }}, 'FILE');">-->
            <span style="cursor: pointer;" onclick="getMediaV2({{ d.msg.record_id }}, '{{ d.msg.mediaUrl2 }}&type=FILE&fileName={{ d.msg.content }}', 'FILE');">
                {{ d.msg.content }}
                {{#  if(d.msg.fileType){ }}
                <img src="/assets/images/{{ d.msg.fileType }}.png" style="width: 30px;">
                {{#  } else { }}
                <i class="layui-icon layui-icon-file" style="font-size: 30px;color:green;"></i>
                {{#  } }}
            </span>
            {{#  } else if(d.msg.msg_type==5) { }}
            <div style="cursor: pointer;position: relative; width: 100px" onclick="getMediaV2({{ d.msg.record_id }}, '{{ d.msg.mediaUrl2 }}&type=VIDEO', 'VIDEO');" style="display: block;">
                <!--                <img id="chatImg{{ d.msg.record_id }}" midimg="0" src="/assets/images/spacer.gif" onload="getMedia({{ d.msg.wechat_id }}, {{ d.msg.record_id }}, 'THUMB', {{ d.msg.record_id }});">-->
                <img id="chatImg{{ d.msg.record_id }}" midimg="0" src="{{ d.msg.mediaUrl2 }}&type=THUMB">
                <i class="layui-icon layui-icon-play" style="position: absolute; top: 35%; left: 35%;z-index:2;font-size: 30px;color: #fff;"></i>
            </div>
            {{#  } else if(d.msg.msg_type==6) { }}
            {{#  if(d.msg.sns_media_id){ }}
            <!--                <img id="snsImg{{ d.msg.snsMediaFileId }}_{{ d.msg.record_id }}" src="/assets/images/spacer.gif" snsImg="0" onload="getSnsMedia({{ d.msg.wechat_id }}, {{ d.msg.friend_id }}, '{{ d.msg.snsMediaFileId }}', 'THUMB', {{ d.msg.record_id }});">-->
            <img id="snsImg{{ d.msg.snsMediaFileId }}_{{ d.msg.record_id }}" src="{{ d.msg.mediaUrl2 }}" snsImg="0">
            {{#  } else { }}
            <img id="chatImg{{ d.msg.record_id }}" src="{{ d.msg.content }}">
            {{#  } }}
            {{#  } }}
        </div>
        </li>
    </script>
    <script id="tpl_friend_info" type="text/html">
        <div class="layim-chat layui-show" id="friendInfo_{{ d.wechat_id }}_{{ d.friend_id }}">
            <div class="layui-row" style="padding: 20px;">
                <div class="layui-col-md1">&nbsp;</div>
                <div class="layui-col-md10">
                    <div class="layui-row">
                        <div class="layui-col-md8">
                            <div style="font-size: large;">
                                {{ d.friendInfo.name || '' }}&nbsp;&nbsp;
                                {{#  if(d.friendInfo.sex==1){ }}
                                <i class="layui-icon layui-icon-male" style="font-size: 20px; color: cornflowerblue;"></i>
                                {{#  } else { }}
                                <i class="layui-icon layui-icon-female" style="font-size: 20px; color: pink;"></i>
                                {{#  } }}
                            </div>
                            <div class="layui-form-mid layui-word-aux">{{ d.friendInfo.sign || '' }}</div>
                        </div>
                        <div class="layui-col-md4">
                            <img src="{{ d.friendInfo.small_head_image || '/assets/images/default_head.jpeg' }}" width="132px" height="132px">
                        </div>
                    </div>
                    <hr class="layui-bg-gray">
                    <div class="layui-row">
                        <div class="layui-row layui-form-label-col"><span class="layui-word-aux">备注名</span>&nbsp;&nbsp;&nbsp;&nbsp;{{ d.friendInfo.remark || '' }}</div>
                        <div class="layui-row layui-form-label-col"><span class="layui-word-aux">地&nbsp;&nbsp;&nbsp;区</span>&nbsp;&nbsp;&nbsp;&nbsp;{{ d.friendInfo.province }}&nbsp;{{ d.friendInfo.city }}</div>
                        <div class="layui-row layui-form-label-col"><span class="layui-word-aux">微信号</span>&nbsp;&nbsp;&nbsp;&nbsp;{{ d.friendInfo.username }}</div>
                        <div class="layui-row layui-form-label-col"></div>
                        <div class="layui-row layui-form-label-col"></div>
                    </div>
                    <div class="layui-row" style="text-align: center;">
                        <div>
                            <button class="layui-btn" onclick="sendMsgToFriend({{ d.wechat_id }}, {{ d.friend_id }}, '{{ d.friendInfo.name }}', {{ d.friendInfo.friend_type }})">发消息</button>
                            <button class="layui-btn layui-btn-danger" onclick="deleteFriend({{ d.wechat_id }}, {{ d.friend_id }}, '{{ d.friendInfo.name }}')">删除好友</button>
                        </div>
                    </div>
                </div>
                <div class="layui-col-md1">&nbsp;</div>
            </div>
        </div>
    </script>
    <script id="tpl_stranger_list" type="text/html">
        {{#  layui.each(d.list, function(index, item){ }}
        <div class="layui-row layui-col-space5" style="margin:1px;background: #f9f9f9;" id="stranger{{ item.id }}" onclick="getStrangerInfo({{ d.wechat_id }}, {{ item.id }})">
            <div class="layui-col-sm3">
                <img src="{{ item.head_img || '' }}" style="width: 100%; height: 100%;">
            </div>
            <div class="layui-col-sm9" style="height: 100%;">
                <span style="float: left;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">{{ item.from_nickname || item.from_username }}</span><br>
                <span class="layui-word-aux" style="width:90%;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">{{ item.content }}</span>
            </div>
            {{#  if(item.is_read==0){ }}
            <span class="layui-badge-dot" style="position: absolute;right:1px;z-index: 999999;"></span>
            {{# showStrangerTabDot(true, d.wechat_id); }}
            {{#  } }}
        </div>
        {{#  }); }}
    </script>
    <script id="tpl_stranger_info" type="text/html">
        <div class="layim-chat layui-show" id="strangerInfo_{{ d.wechat_id }}_{{ d.id }}">
            <div class="layui-row" style="padding: 20px;">
                <div class="layui-col-md1">&nbsp;</div>
                <div class="layui-col-md10">
                    <div class="layui-row">
                        <div class="layui-col-md8">
                            <div style="font-size: large;">
                                {{ d.strangerInfo.from_nickname }}
                            </div>
                        </div>
                        <div class="layui-col-md4">
                            <img src="{{ d.strangerInfo.head_img || '/assets/images/default_head.jpeg' }}" width="100px;">
                        </div>
                    </div>
                    <hr class="layui-bg-gray">
                    <div class="layui-row">
                        <div class="layui-row layui-form-label-col"><span class="layui-word-aux">地&nbsp;&nbsp;&nbsp;区</span>&nbsp;&nbsp;&nbsp;&nbsp;{{ d.strangerInfo.province }}&nbsp;{{ d.strangerInfo.city }}</div>
                        <div class="layui-row layui-form-label-col"><span class="layui-word-aux">微信号</span>&nbsp;&nbsp;&nbsp;&nbsp;{{ d.strangerInfo.from_username }}</div>
                        <div class="layui-row layui-form-label-col"></div>
                    </div>
                    <hr class="layui-bg-gray">
                    <div class="layui-row">
                        <div class="layui-row layui-form-label-col">
                            <div class="layui-form-item">
                                <label class="layui-word-aux" style="float: left;position: relative;">打招呼</label>
                                <div style="margin-left: 70px;">
                                    {{#  layui.each(d.strangerInfo.chatRecords, function(index, item){ }}
                                    {{#  if(item.sender==1){ }}
                                    <p>{{ d.strangerInfo.from_nickname }}：{{ item.content }}</p>
                                    {{#  } else { }}
                                    <p>我：{{ item.content }}</p>
                                    {{#  } }}
                                    {{#  }); }}
                                </div>
                            </div>
                        </div>
                        <div class="layui-row layui-form-label-col"></div>
                    </div>
                    <div class="layui-row" style="text-align: center;">
                        <div>
                            {{#  if(d.strangerInfo.add_friend_status==0){ }}
                            {{#  if(d.strangerInfo.opcode==2){ }}
                            <button class="layui-btn" onclick="acceptStranger({{ d.strangerInfo.id }})">通过验证</button>
                            {{#  } else { }}
                            {{#  } }}
                            <button class="layui-btn layui-btn-warm" onclick="replyStranger({{ d.wechat_id }}, {{ d.strangerInfo.id }})">回复</button>
                            {{#  } else { }}
                            <button class="layui-btn layui-btn-disabled">已添加</button>
                            {{#  } }}
                        </div>
                    </div>
                </div>
                <div class="layui-col-md1">&nbsp;</div>
            </div>
        </div>
    </script>
    <script id="tpl_reply_stranger" type="text/html">
        <div class="layui-form-item layui-form-text">
            <input type="hidden" name="stranger_id" value="{{ d.stranger_id }}">
            <div style="padding: 20px;">
                <textarea name="reply_stranger" placeholder="请输入回复内容，不超过50个中文，100个字符" class="layui-textarea"></textarea>
            </div>
        </div>
    </script>
    <script id="tpl_add_friend" type="text/html">
        <div class="layui-form-item layui-form-text">
            <input type="hidden" name="wechat_id" value="{{ d.wechat_id }}">
            <div style="padding: 20px;">
                <input type="text" name="search_stranger" placeholder="请输入手机号、微信号或QQ号" required autocomplete="off" class="layui-input"><br>
                <textarea name="friend_msg" placeholder="请输入验证消息，不超过50个中文，100个字符" class="layui-textarea"></textarea>
            </div>
        </div>
    </script>
    <script id="tpl_customer_info" type="text/html">
        {{#  layui.each(d.customerInfo, function(index, item){ }}
        {{#  if(item){ }}
        <div>{{ index }}：{{ item }}</div>
        {{#  } }}
        {{#  }); }}
    </script>
    <script id="tpl_friend_tag" type="text/html">
        {{#  layui.each(d.friendTags, function(index, item){ }}
        {{#  if(item){ }}
        <button id="selectedTag{{item.tag_id}}" class="layui-btn layui-btn-sm layui-btn-radius layui-btn-primary" onclick="removeTag({{d.wechat_id}}, {{item.friend_id}}, {{item.tag_id}});"><i class="layui-icon layui-icon-note" style="color: green;"></i>{{item.tag_name}}<i class="layui-icon layui-icon-close-fill" style="color: orange;"></i>
            <input type="hidden" name="tag_ids[]" class="existTag" value="{{item.tag_id}}">
        </button>
        {{#  } }}
        {{#  }); }}
        <button type="button" class="layui-btn layui-btn-sm" onclick="editTag({{d.wechat_id}}, {{d.friend_id}})"><i class="layui-icon layui-icon-add-1"></i></button>
    </script>
    <script id="tpl_add_tag" type="text/html">
        <form class="layui-form" action="" onsubmit="return false;">
            <div class="layui-form-item" id="existTagsBlock">
                <label class="layui-form-label">已标签</label>
                <div class="layui-input-block existTags" id="existTags">
                </div>
            </div>
            <div class="layui-form-item layui-hide" id="availableTagsBlock">
                <label class="layui-form-label">可选标签</label>
                <div class="layui-input-block availableTags" id="availableTags">
                </div>
            </div>
            <div class="layui-form-item layui-hide" id="newTagBlock">
                <label class="layui-form-label">新标签</label>
                <div class="layui-input-inline">
                    <input type="text" name="new_tag_name" autocomplete="off" placeholder="请输入新标签" class="layui-input">
                </div>
            </div>
        </form>
    </script>
    <script type="text/html" id="wxidTpl">
        <img src="{{d.small_head_image || '/assets/images/default_head.jpeg'}}" width="30px">
        {{d.name}}
    </script>
    <script type="text/html" id="tagFriendBar">
        <button class="layui-btn layui-btn-sm layui-btn-normal" onclick="sendMsgToFriend({{ d.wechat_id }}, {{ d.id }}, '{{ d.name }}')">发消息</button>
    </script>
    <script id="tpl_material_group" type="text/html">
        <label>素材组筛选：</label>
        <span class="layui-breadcrumb" lay-separator="|">
    {{#  layui.each(d.materialGroups, function(index, item){ }}
    {{#  if(item){ }}
    <a href="#" onclick="getMaterials({{ d.wechat_id }}, {{ d.friend_id }}, {{ item.id }});">{{ item.name }}（{{ item.item_num }}）</a>
    {{#  } }}
    {{#  }); }}
    </span>
    </script>
    <script id="tpl_material" type="text/html">
        <table class="layui-table">
            <colgroup>
                <col>
                <col width="40">
            </colgroup>
            <tbody>
            {{#  layui.each(d.materials, function(index, item){ }}
            {{#  if(item){ }}
            <tr>
                <td>{{ item.title }}</td>
                <td><button class="layui-btn  layui-btn-xs" onclick="sendMaterial({{ d.wechat_id }}, {{ d.friend_id }}, {{ item.id }})">发送</button></td>
            </tr>
            {{#  } }}
            {{#  }); }}
            </tbody>
        </table>
    </script>

    <script id="tpl_emoji" type="text/html">
        <div class="layui-tab layui-tab-brief" id="friendChatEmoji_{{ d.wechat_id }}_{{ d.friend_id }}">
            <ul class="layui-tab-title">
                <li class="layui-this">QQ表情</li>
                <!--            <li>符号表情</li>-->
            </ul>
            <div class="layui-tab-content">
                <div class="layui-tab-item layui-show qq_face" style="height: 222px;overflow-y:auto;">
                    <a title="微笑" type="qq" class="face qqface0">微笑</a> <a title="撇嘴" type="qq" class="face qqface1">撇嘴</a> <a title="色" type="qq" class="face qqface2">色</a> <a title="发呆" type="qq" class="face qqface3">发呆</a> <a title="得意" type="qq" class="face qqface4">得意</a> <a title="流泪" type="qq" class="face qqface5">流泪</a> <a title="害羞" type="qq" class="face qqface6">害羞</a> <a title="闭嘴" type="qq" class="face qqface7">闭嘴</a> <a title="睡" type="qq" class="face qqface8">睡</a> <a title="大哭" type="qq" class="face qqface9">大哭</a> <a title="尴尬" type="qq" class="face qqface10">尴尬</a> <a title="发怒" type="qq" class="face qqface11">发怒</a> <a title="调皮" type="qq" class="face qqface12">调皮</a> <a title="呲牙" type="qq" class="face qqface13">呲牙</a> <a title="惊讶" type="qq" class="face qqface14">惊讶</a> <a title="难过" type="qq" class="face qqface15">难过</a> <a title="酷" type="qq" class="face qqface16">酷</a> <a title="冷汗" type="qq" class="face qqface17">冷汗</a> <a title="抓狂" type="qq" class="face qqface18">抓狂</a> <a title="吐" type="qq" class="face qqface19">吐</a> <a title="偷笑" type="qq" class="face qqface20">偷笑</a> <a title="愉快" type="qq" class="face qqface21">愉快</a> <a title="白眼" type="qq" class="face qqface22">白眼</a> <a title="傲慢" type="qq" class="face qqface23">傲慢</a> <a title="饥饿" type="qq" class="face qqface24">饥饿</a> <a title="困" type="qq" class="face qqface25">困</a> <a title="惊恐" type="qq" class="face qqface26">惊恐</a> <a title="流汗" type="qq" class="face qqface27">流汗</a> <a title="憨笑" type="qq" class="face qqface28">憨笑</a> <a title="悠闲" type="qq" class="face qqface29">悠闲</a> <a title="奋斗" type="qq" class="face qqface30">奋斗</a> <a title="咒骂" type="qq" class="face qqface31">咒骂</a> <a title="疑问" type="qq" class="face qqface32">疑问</a> <a title="嘘" type="qq" class="face qqface33">嘘</a> <a title="晕" type="qq" class="face qqface34">晕</a> <a title="疯了" type="qq" class="face qqface35">疯了</a> <a title="衰" type="qq" class="face qqface36">衰</a> <a title="骷髅" type="qq" class="face qqface37">骷髅</a> <a title="敲打" type="qq" class="face qqface38">敲打</a> <a title="再见" type="qq" class="face qqface39">再见</a> <a title="擦汗" type="qq" class="face qqface40">擦汗</a> <a title="抠鼻" type="qq" class="face qqface41">抠鼻</a> <a title="鼓掌" type="qq" class="face qqface42">鼓掌</a> <a title="糗大了" type="qq" class="face qqface43">糗大了</a> <a title="坏笑" type="qq" class="face qqface44">坏笑</a> <a title="左哼哼" type="qq" class="face qqface45">左哼哼</a> <a title="右哼哼" type="qq" class="face qqface46">右哼哼</a> <a title="哈欠" type="qq" class="face qqface47">哈欠</a> <a title="鄙视" type="qq" class="face qqface48">鄙视</a> <a title="委屈" type="qq" class="face qqface49">委屈</a> <a title="快哭了" type="qq" class="face qqface50">快哭了</a> <a title="阴险" type="qq" class="face qqface51">阴险</a> <a title="亲亲" type="qq" class="face qqface52">亲亲</a> <a title="吓" type="qq" class="face qqface53">吓</a> <a title="可怜" type="qq" class="face qqface54">可怜</a> <a title="菜刀" type="qq" class="face qqface55">菜刀</a> <a title="西瓜" type="qq" class="face qqface56">西瓜</a> <a title="啤酒" type="qq" class="face qqface57">啤酒</a> <a title="篮球" type="qq" class="face qqface58">篮球</a> <a title="乒乓" type="qq" class="face qqface59">乒乓</a> <a title="咖啡" type="qq" class="face qqface60">咖啡</a> <a title="饭" type="qq" class="face qqface61">饭</a> <a title="猪头" type="qq" class="face qqface62">猪头</a> <a title="玫瑰" type="qq" class="face qqface63">玫瑰</a> <a title="凋谢" type="qq" class="face qqface64">凋谢</a> <a title="嘴唇" type="qq" class="face qqface65">嘴唇</a> <a title="爱心" type="qq" class="face qqface66">爱心</a> <a title="心碎" type="qq" class="face qqface67">心碎</a> <a title="蛋糕" type="qq" class="face qqface68">蛋糕</a> <a title="闪电" type="qq" class="face qqface69">闪电</a> <a title="炸弹" type="qq" class="face qqface70">炸弹</a> <a title="刀" type="qq" class="face qqface71">刀</a> <a title="足球" type="qq" class="face qqface72">足球</a> <a title="瓢虫" type="qq" class="face qqface73">瓢虫</a> <a title="便便" type="qq" class="face qqface74">便便</a> <a title="月亮" type="qq" class="face qqface75">月亮</a> <a title="太阳" type="qq" class="face qqface76">太阳</a> <a title="礼物" type="qq" class="face qqface77">礼物</a> <a title="拥抱" type="qq" class="face qqface78">拥抱</a> <a title="强" type="qq" class="face qqface79">强</a> <a title="弱" type="qq" class="face qqface80">弱</a> <a title="握手" type="qq" class="face qqface81">握手</a> <a title="胜利" type="qq" class="face qqface82">胜利</a> <a title="抱拳" type="qq" class="face qqface83">抱拳</a> <a title="勾引" type="qq" class="face qqface84">勾引</a> <a title="拳头" type="qq" class="face qqface85">拳头</a> <a title="差劲" type="qq" class="face qqface86">差劲</a> <a title="爱你" type="qq" class="face qqface87">爱你</a> <a title="NO" type="qq" class="face qqface88">NO</a> <a title="OK" type="qq" class="face qqface89">OK</a> <a title="爱情" type="qq" class="face qqface90">爱情</a> <a title="飞吻" type="qq" class="face qqface91">飞吻</a> <a title="跳跳" type="qq" class="face qqface92">跳跳</a> <a title="发抖" type="qq" class="face qqface93">发抖</a> <a title="怄火" type="qq" class="face qqface94">怄火</a> <a title="转圈" type="qq" class="face qqface95">转圈</a> <a title="磕头" type="qq" class="face qqface96">磕头</a> <a title="回头" type="qq" class="face qqface97">回头</a> <a title="跳绳" type="qq" class="face qqface98">跳绳</a> <a title="投降" type="qq" class="face qqface99">投降</a> <a title="激动" type="qq" class="face qqface100">激动</a> <a title="乱舞" type="qq" class="face qqface101">乱舞</a> <a title="献吻" type="qq" class="face qqface102">献吻</a> <a title="左太极" type="qq" class="face qqface103">左太极</a> <a title="右太极" type="qq" class="face qqface104">右太极</a>
                </div>
                <div class="layui-tab-item emoji_face" style="height: 222px;overflow-y:auto;display: none;">
                    <a title="笑脸" type="emoji" class="face emoji0">笑脸</a><a title="生病" type="emoji" class="face emoji1">生病</a><a title="破涕为笑" type="emoji" class="face emoji2">破涕为笑</a><a title="吐舌" type="emoji" class="face emoji3">吐舌</a><a title="脸红" type="emoji" class="face emoji4">脸红</a><a title="恐惧" type="emoji" class="face emoji5">恐惧</a><a title="失望" type="emoji" class="face emoji6">失望</a><a title="无语" type="emoji" class="face emoji7">无语</a><a title="嘿哈" type="qq" class="face emoji8">嘿哈</a><a title="捂脸" type="qq" class="face emoji9">捂脸</a><a title="奸笑" type="qq" class="face emoji10">奸笑</a><a title="机智" type="qq" class="face emoji11">机智</a><a title="皱眉" type="qq" class="face emoji12">皱眉</a><a title="耶" type="qq" class="face emoji13">耶</a><a title="鬼魂" type="emoji" class="face emoji14">鬼魂</a><a title="合十" type="emoji" class="face emoji15">合十</a><a title="强壮" type="emoji" class="face emoji16">强壮</a><a title="庆祝" type="emoji" class="face emoji17">庆祝</a><a title="礼物" type="emoji" class="face emoji18">礼物</a><a title="红包" type="qq" class="face emoji19">红包</a><a title="鸡" type="qq" class="face emoji20">鸡</a><a title="开心" type="emoji" class="face emoji21">开心</a><a title="大笑" type="emoji" class="face emoji22">大笑</a><a title="热情" type="emoji" class="face emoji23">热情</a><a title="眨眼" type="emoji" class="face emoji24">眨眼</a><a title="色" type="emoji" class="face emoji25">色</a><a title="接吻" type="emoji" class="face emoji26">接吻</a><a title="亲吻" type="emoji" class="face emoji27">亲吻</a><a title="露齿笑" type="emoji" class="face emoji28">露齿笑</a><a title="满意" type="emoji" class="face emoji29">满意</a><a title="戏弄" type="emoji" class="face emoji30">戏弄</a><a title="得意" type="emoji" class="face emoji31">得意</a><a title="汗" type="emoji" class="face emoji32">汗</a><a title="低落" type="emoji" class="face emoji33">低落</a><a title="呸" type="emoji" class="face emoji34">呸</a><a title="焦虑" type="emoji" class="face emoji35">焦虑</a><a title="担心" type="emoji" class="face emoji36">担心</a><a title="震惊" type="emoji" class="face emoji37">震惊</a><a title="悔恨" type="emoji" class="face emoji38">悔恨</a><a title="眼泪" type="emoji" class="face emoji39">眼泪</a><a title="哭" type="emoji" class="face emoji40">哭</a><a title="晕" type="emoji" class="face emoji41">晕</a><a title="心烦" type="emoji" class="face emoji42">心烦</a><a title="生气" type="emoji" class="face emoji43">生气</a><a title="睡觉" type="emoji" class="face emoji44">睡觉</a><a title="恶魔" type="emoji" class="face emoji45">恶魔</a><a title="外星人" type="emoji" class="face emoji46">外星人</a><a title="心" type="emoji" class="face emoji47">心</a><a title="心碎" type="emoji" class="face emoji48">心碎</a><a title="丘比特" type="emoji" class="face emoji49">丘比特</a><a title="闪烁" type="emoji" class="face emoji50">闪烁</a><a title="星星" type="emoji" class="face emoji51">星星</a><a title="叹号" type="emoji" class="face emoji52">叹号</a><a title="问号" type="emoji" class="face emoji53">问号</a><a title="睡着" type="emoji" class="face emoji54">睡着</a><a title="水滴" type="emoji" class="face emoji55">水滴</a><a title="音乐" type="emoji" class="face emoji56">音乐</a><a title="火" type="emoji" class="face emoji57">火</a><a title="便便" type="emoji" class="face emoji58">便便</a><a title="强" type="emoji" class="face emoji59">强</a><a title="弱" type="emoji" class="face emoji60">弱</a><a title="拳头" type="emoji" class="face emoji61">拳头</a><a title="胜利" type="emoji" class="face emoji62">胜利</a><a title="上" type="emoji" class="face emoji63">上</a><a title="下" type="emoji" class="face emoji64">下</a><a title="右" type="emoji" class="face emoji65">右</a><a title="左" type="emoji" class="face emoji66">左</a><a title="第一" type="emoji" class="face emoji67">第一</a><a title="吻" type="emoji" class="face emoji68">吻</a><a title="热恋" type="emoji" class="face emoji69">热恋</a><a title="男孩" type="emoji" class="face emoji70">男孩</a><a title="女孩" type="emoji" class="face emoji71">女孩</a><a title="女士" type="emoji" class="face emoji72">女士</a><a title="男士" type="emoji" class="face emoji73">男士</a><a title="天使" type="emoji" class="face emoji74">天使</a><a title="骷髅" type="emoji" class="face emoji75">骷髅</a><a title="红唇" type="emoji" class="face emoji76">红唇</a><a title="太阳" type="emoji" class="face emoji77">太阳</a><a title="下雨" type="emoji" class="face emoji78">下雨</a><a title="多云" type="emoji" class="face emoji79">多云</a><a title="雪人" type="emoji" class="face emoji80">雪人</a><a title="月亮" type="emoji" class="face emoji81">月亮</a><a title="闪电" type="emoji" class="face emoji82">闪电</a><a title="海浪" type="emoji" class="face emoji83">海浪</a><a title="猫" type="emoji" class="face emoji84">猫</a><a title="小狗" type="emoji" class="face emoji85">小狗</a><a title="老鼠" type="emoji" class="face emoji86">老鼠</a><a title="仓鼠" type="emoji" class="face emoji87">仓鼠</a><a title="兔子" type="emoji" class="face emoji88">兔子</a><a title="狗" type="emoji" class="face emoji89">狗</a><a title="青蛙" type="emoji" class="face emoji90">青蛙</a><a title="老虎" type="emoji" class="face emoji91">老虎</a><a title="考拉" type="emoji" class="face emoji92">考拉</a><a title="熊" type="emoji" class="face emoji93">熊</a><a title="猪" type="emoji" class="face emoji94">猪</a><a title="牛" type="emoji" class="face emoji95">牛</a><a title="野猪" type="emoji" class="face emoji96">野猪</a><a title="猴子" type="emoji" class="face emoji97">猴子</a><a title="马" type="emoji" class="face emoji98">马</a><a title="蛇" type="emoji" class="face emoji99">蛇</a><a title="鸽子" type="emoji" class="face emoji100">鸽子</a><a title="鸡" type="emoji" class="face emoji101">鸡</a><a title="企鹅" type="emoji" class="face emoji102">企鹅</a><a title="毛虫" type="emoji" class="face emoji103">毛虫</a><a title="章鱼" type="emoji" class="face emoji104">章鱼</a><a title="鱼" type="emoji" class="face emoji105">鱼</a><a title="鲸鱼" type="emoji" class="face emoji106">鲸鱼</a><a title="海豚" type="emoji" class="face emoji107">海豚</a><a title="玫瑰" type="emoji" class="face emoji108">玫瑰</a><a title="花" type="emoji" class="face emoji109">花</a><a title="棕榈树" type="emoji" class="face emoji110">棕榈树</a><a title="仙人掌" type="emoji" class="face emoji111">仙人掌</a><a title="礼盒" type="emoji" class="face emoji112">礼盒</a><a title="南瓜灯" type="emoji" class="face emoji113">南瓜灯</a><a title="圣诞老人" type="emoji" class="face emoji114">圣诞老人</a><a title="圣诞树" type="emoji" class="face emoji115">圣诞树</a><a title="铃" type="emoji" class="face emoji116">铃</a><a title="气球" type="emoji" class="face emoji117">气球</a><a title="CD" type="emoji" class="face emoji118">CD</a><a title="相机" type="emoji" class="face emoji119">相机</a><a title="录像机" type="emoji" class="face emoji120">录像机</a><a title="电脑" type="emoji" class="face emoji121">电脑</a><a title="电视" type="emoji" class="face emoji122">电视</a><a title="电话" type="emoji" class="face emoji123">电话</a><a title="解锁" type="emoji" class="face emoji124">解锁</a><a title="锁" type="emoji" class="face emoji125">锁</a><a title="钥匙" type="emoji" class="face emoji126">钥匙</a><a title="成交" type="emoji" class="face emoji127">成交</a><a title="灯泡" type="emoji" class="face emoji128">灯泡</a><a title="邮箱" type="emoji" class="face emoji129">邮箱</a><a title="浴缸" type="emoji" class="face emoji130">浴缸</a><a title="钱" type="emoji" class="face emoji131">钱</a><a title="炸弹" type="emoji" class="face emoji132">炸弹</a><a title="手枪" type="emoji" class="face emoji133">手枪</a><a title="药丸" type="emoji" class="face emoji134">药丸</a><a title="橄榄球" type="emoji" class="face emoji135">橄榄球</a><a title="篮球" type="emoji" class="face emoji136">篮球</a><a title="足球" type="emoji" class="face emoji137">足球</a><a title="棒球" type="emoji" class="face emoji138">棒球</a><a title="高尔夫" type="emoji" class="face emoji139">高尔夫</a><a title="奖杯" type="emoji" class="face emoji140">奖杯</a><a title="入侵者" type="emoji" class="face emoji141">入侵者</a><a title="唱歌" type="emoji" class="face emoji142">唱歌</a><a title="吉他" type="emoji" class="face emoji143">吉他</a><a title="比基尼" type="emoji" class="face emoji144">比基尼</a><a title="皇冠" type="emoji" class="face emoji145">皇冠</a><a title="雨伞" type="emoji" class="face emoji146">雨伞</a><a title="手提包" type="emoji" class="face emoji147">手提包</a><a title="口红" type="emoji" class="face emoji148">口红</a><a title="戒指" type="emoji" class="face emoji149">戒指</a><a title="钻石" type="emoji" class="face emoji150">钻石</a><a title="咖啡" type="emoji" class="face emoji151">咖啡</a><a title="啤酒" type="emoji" class="face emoji152">啤酒</a><a title="干杯" type="emoji" class="face emoji153">干杯</a><a title="鸡尾酒" type="emoji" class="face emoji154">鸡尾酒</a><a title="汉堡" type="emoji" class="face emoji155">汉堡</a><a title="薯条" type="emoji" class="face emoji156">薯条</a><a title="意面" type="emoji" class="face emoji157">意面</a><a title="寿司" type="emoji" class="face emoji158">寿司</a><a title="面条" type="emoji" class="face emoji159">面条</a><a title="煎蛋" type="emoji" class="face emoji160">煎蛋</a><a title="冰激凌" type="emoji" class="face emoji161">冰激凌</a><a title="蛋糕" type="emoji" class="face emoji162">蛋糕</a><a title="苹果" type="emoji" class="face emoji163">苹果</a><a title="飞机" type="emoji" class="face emoji164">飞机</a><a title="火箭" type="emoji" class="face emoji165">火箭</a><a title="自行车" type="emoji" class="face emoji166">自行车</a><a title="高铁" type="emoji" class="face emoji167">高铁</a><a title="警告" type="emoji" class="face emoji168">警告</a><a title="旗" type="emoji" class="face emoji169">旗</a><a title="男人" type="emoji" class="face emoji170">男人</a><a title="女人" type="emoji" class="face emoji171">女人</a><a title="O" type="emoji" class="face emoji172">O</a><a title="X" type="emoji" class="face emoji173">X</a><a title="版权" type="emoji" class="face emoji174">版权</a><a title="注册商标" type="emoji" class="face emoji175">注册商标</a><a title="商标" type="emoji" class="face emoji176">商标</a>
                </div>
            </div>
        </div>
    </script>
    <script id="tpl_test" type="text/html">
        <img class="emoji emoji1f335" text="_web" src="/assets/images/spacer.gif">
        <div id="mmpop_emoji_panel" class="mmpop ng-scope slide-top">
            <div class="expression">
                <div class="scroll-wrapper exp_bd scrollbar-dynamic" style="position: relative;"><div jquery-scrollbar="" class="exp_bd scrollbar-dynamic scroll-content" ng-click="selectEmoticon($event)" style="margin-bottom: 0px; margin-right: 0px;">
                    <div class="exp_cont active" ng-class="{'active': index == 1}">
                        <div class="qq_face">
                            <a title="微笑" type="qq" class="face qqface0">微笑</a> <a title="撇嘴" type="qq" class="face qqface1">撇嘴</a> <a title="色" type="qq" class="face qqface2">色</a> <a title="发呆" type="qq" class="face qqface3">发呆</a> <a title="得意" type="qq" class="face qqface4">得意</a> <a title="流泪" type="qq" class="face qqface5">流泪</a> <a title="害羞" type="qq" class="face qqface6">害羞</a> <a title="闭嘴" type="qq" class="face qqface7">闭嘴</a> <a title="睡" type="qq" class="face qqface8">睡</a> <a title="大哭" type="qq" class="face qqface9">大哭</a> <a title="尴尬" type="qq" class="face qqface10">尴尬</a> <a title="发怒" type="qq" class="face qqface11">发怒</a> <a title="调皮" type="qq" class="face qqface12">调皮</a> <a title="呲牙" type="qq" class="face qqface13">呲牙</a> <a title="惊讶" type="qq" class="face qqface14">惊讶</a> <a title="难过" type="qq" class="face qqface15">难过</a> <a title="酷" type="qq" class="face qqface16">酷</a> <a title="冷汗" type="qq" class="face qqface17">冷汗</a> <a title="抓狂" type="qq" class="face qqface18">抓狂</a> <a title="吐" type="qq" class="face qqface19">吐</a> <a title="偷笑" type="qq" class="face qqface20">偷笑</a> <a title="愉快" type="qq" class="face qqface21">愉快</a> <a title="白眼" type="qq" class="face qqface22">白眼</a> <a title="傲慢" type="qq" class="face qqface23">傲慢</a> <a title="饥饿" type="qq" class="face qqface24">饥饿</a> <a title="困" type="qq" class="face qqface25">困</a> <a title="惊恐" type="qq" class="face qqface26">惊恐</a> <a title="流汗" type="qq" class="face qqface27">流汗</a> <a title="憨笑" type="qq" class="face qqface28">憨笑</a> <a title="悠闲" type="qq" class="face qqface29">悠闲</a> <a title="奋斗" type="qq" class="face qqface30">奋斗</a> <a title="咒骂" type="qq" class="face qqface31">咒骂</a> <a title="疑问" type="qq" class="face qqface32">疑问</a> <a title="嘘" type="qq" class="face qqface33">嘘</a> <a title="晕" type="qq" class="face qqface34">晕</a> <a title="疯了" type="qq" class="face qqface35">疯了</a> <a title="衰" type="qq" class="face qqface36">衰</a> <a title="骷髅" type="qq" class="face qqface37">骷髅</a> <a title="敲打" type="qq" class="face qqface38">敲打</a> <a title="再见" type="qq" class="face qqface39">再见</a> <a title="擦汗" type="qq" class="face qqface40">擦汗</a> <a title="抠鼻" type="qq" class="face qqface41">抠鼻</a> <a title="鼓掌" type="qq" class="face qqface42">鼓掌</a> <a title="糗大了" type="qq" class="face qqface43">糗大了</a> <a title="坏笑" type="qq" class="face qqface44">坏笑</a> <a title="左哼哼" type="qq" class="face qqface45">左哼哼</a> <a title="右哼哼" type="qq" class="face qqface46">右哼哼</a> <a title="哈欠" type="qq" class="face qqface47">哈欠</a> <a title="鄙视" type="qq" class="face qqface48">鄙视</a> <a title="委屈" type="qq" class="face qqface49">委屈</a> <a title="快哭了" type="qq" class="face qqface50">快哭了</a> <a title="阴险" type="qq" class="face qqface51">阴险</a> <a title="亲亲" type="qq" class="face qqface52">亲亲</a> <a title="吓" type="qq" class="face qqface53">吓</a> <a title="可怜" type="qq" class="face qqface54">可怜</a> <a title="菜刀" type="qq" class="face qqface55">菜刀</a> <a title="西瓜" type="qq" class="face qqface56">西瓜</a> <a title="啤酒" type="qq" class="face qqface57">啤酒</a> <a title="篮球" type="qq" class="face qqface58">篮球</a> <a title="乒乓" type="qq" class="face qqface59">乒乓</a> <a title="咖啡" type="qq" class="face qqface60">咖啡</a> <a title="饭" type="qq" class="face qqface61">饭</a> <a title="猪头" type="qq" class="face qqface62">猪头</a> <a title="玫瑰" type="qq" class="face qqface63">玫瑰</a> <a title="凋谢" type="qq" class="face qqface64">凋谢</a> <a title="嘴唇" type="qq" class="face qqface65">嘴唇</a> <a title="爱心" type="qq" class="face qqface66">爱心</a> <a title="心碎" type="qq" class="face qqface67">心碎</a> <a title="蛋糕" type="qq" class="face qqface68">蛋糕</a> <a title="闪电" type="qq" class="face qqface69">闪电</a> <a title="炸弹" type="qq" class="face qqface70">炸弹</a> <a title="刀" type="qq" class="face qqface71">刀</a> <a title="足球" type="qq" class="face qqface72">足球</a> <a title="瓢虫" type="qq" class="face qqface73">瓢虫</a> <a title="便便" type="qq" class="face qqface74">便便</a> <a title="月亮" type="qq" class="face qqface75">月亮</a> <a title="太阳" type="qq" class="face qqface76">太阳</a> <a title="礼物" type="qq" class="face qqface77">礼物</a> <a title="拥抱" type="qq" class="face qqface78">拥抱</a> <a title="强" type="qq" class="face qqface79">强</a> <a title="弱" type="qq" class="face qqface80">弱</a> <a title="握手" type="qq" class="face qqface81">握手</a> <a title="胜利" type="qq" class="face qqface82">胜利</a> <a title="抱拳" type="qq" class="face qqface83">抱拳</a> <a title="勾引" type="qq" class="face qqface84">勾引</a> <a title="拳头" type="qq" class="face qqface85">拳头</a> <a title="差劲" type="qq" class="face qqface86">差劲</a> <a title="爱你" type="qq" class="face qqface87">爱你</a> <a title="NO" type="qq" class="face qqface88">NO</a> <a title="OK" type="qq" class="face qqface89">OK</a> <a title="爱情" type="qq" class="face qqface90">爱情</a> <a title="飞吻" type="qq" class="face qqface91">飞吻</a> <a title="跳跳" type="qq" class="face qqface92">跳跳</a> <a title="发抖" type="qq" class="face qqface93">发抖</a> <a title="怄火" type="qq" class="face qqface94">怄火</a> <a title="转圈" type="qq" class="face qqface95">转圈</a> <a title="磕头" type="qq" class="face qqface96">磕头</a> <a title="回头" type="qq" class="face qqface97">回头</a> <a title="跳绳" type="qq" class="face qqface98">跳绳</a> <a title="投降" type="qq" class="face qqface99">投降</a> <a title="激动" type="qq" class="face qqface100">激动</a> <a title="乱舞" type="qq" class="face qqface101">乱舞</a> <a title="献吻" type="qq" class="face qqface102">献吻</a> <a title="左太极" type="qq" class="face qqface103">左太极</a> <a title="右太极" type="qq" class="face qqface104">右太极</a>
                        </div>
                    </div>
                    <div class="exp_cont" ng-class="{'active': index == 2}">
                        <div class="emoji_face">
                            <a title="笑脸" type="emoji" class="face emoji0">笑脸</a><a title="生病" type="emoji" class="face emoji1">生病</a><a title="破涕为笑" type="emoji" class="face emoji2">破涕为笑</a><a title="吐舌" type="emoji" class="face emoji3">吐舌</a><a title="脸红" type="emoji" class="face emoji4">脸红</a><a title="恐惧" type="emoji" class="face emoji5">恐惧</a><a title="失望" type="emoji" class="face emoji6">失望</a><a title="无语" type="emoji" class="face emoji7">无语</a><a title="嘿哈" type="qq" class="face emoji8">嘿哈</a><a title="捂脸" type="qq" class="face emoji9">捂脸</a><a title="奸笑" type="qq" class="face emoji10">奸笑</a><a title="机智" type="qq" class="face emoji11">机智</a><a title="皱眉" type="qq" class="face emoji12">皱眉</a><a title="耶" type="qq" class="face emoji13">耶</a><a title="鬼魂" type="emoji" class="face emoji14">鬼魂</a><a title="合十" type="emoji" class="face emoji15">合十</a><a title="强壮" type="emoji" class="face emoji16">强壮</a><a title="庆祝" type="emoji" class="face emoji17">庆祝</a><a title="礼物" type="emoji" class="face emoji18">礼物</a><a title="红包" type="qq" class="face emoji19">红包</a><a title="鸡" type="qq" class="face emoji20">鸡</a><a title="开心" type="emoji" class="face emoji21">开心</a><a title="大笑" type="emoji" class="face emoji22">大笑</a><a title="热情" type="emoji" class="face emoji23">热情</a><a title="眨眼" type="emoji" class="face emoji24">眨眼</a><a title="色" type="emoji" class="face emoji25">色</a><a title="接吻" type="emoji" class="face emoji26">接吻</a><a title="亲吻" type="emoji" class="face emoji27">亲吻</a><a title="露齿笑" type="emoji" class="face emoji28">露齿笑</a><a title="满意" type="emoji" class="face emoji29">满意</a><a title="戏弄" type="emoji" class="face emoji30">戏弄</a><a title="得意" type="emoji" class="face emoji31">得意</a><a title="汗" type="emoji" class="face emoji32">汗</a><a title="低落" type="emoji" class="face emoji33">低落</a><a title="呸" type="emoji" class="face emoji34">呸</a><a title="焦虑" type="emoji" class="face emoji35">焦虑</a><a title="担心" type="emoji" class="face emoji36">担心</a><a title="震惊" type="emoji" class="face emoji37">震惊</a><a title="悔恨" type="emoji" class="face emoji38">悔恨</a><a title="眼泪" type="emoji" class="face emoji39">眼泪</a><a title="哭" type="emoji" class="face emoji40">哭</a><a title="晕" type="emoji" class="face emoji41">晕</a><a title="心烦" type="emoji" class="face emoji42">心烦</a><a title="生气" type="emoji" class="face emoji43">生气</a><a title="睡觉" type="emoji" class="face emoji44">睡觉</a><a title="恶魔" type="emoji" class="face emoji45">恶魔</a><a title="外星人" type="emoji" class="face emoji46">外星人</a><a title="心" type="emoji" class="face emoji47">心</a><a title="心碎" type="emoji" class="face emoji48">心碎</a><a title="丘比特" type="emoji" class="face emoji49">丘比特</a><a title="闪烁" type="emoji" class="face emoji50">闪烁</a><a title="星星" type="emoji" class="face emoji51">星星</a><a title="叹号" type="emoji" class="face emoji52">叹号</a><a title="问号" type="emoji" class="face emoji53">问号</a><a title="睡着" type="emoji" class="face emoji54">睡着</a><a title="水滴" type="emoji" class="face emoji55">水滴</a><a title="音乐" type="emoji" class="face emoji56">音乐</a><a title="火" type="emoji" class="face emoji57">火</a><a title="便便" type="emoji" class="face emoji58">便便</a><a title="强" type="emoji" class="face emoji59">强</a><a title="弱" type="emoji" class="face emoji60">弱</a><a title="拳头" type="emoji" class="face emoji61">拳头</a><a title="胜利" type="emoji" class="face emoji62">胜利</a><a title="上" type="emoji" class="face emoji63">上</a><a title="下" type="emoji" class="face emoji64">下</a><a title="右" type="emoji" class="face emoji65">右</a><a title="左" type="emoji" class="face emoji66">左</a><a title="第一" type="emoji" class="face emoji67">第一</a><a title="吻" type="emoji" class="face emoji68">吻</a><a title="热恋" type="emoji" class="face emoji69">热恋</a><a title="男孩" type="emoji" class="face emoji70">男孩</a><a title="女孩" type="emoji" class="face emoji71">女孩</a><a title="女士" type="emoji" class="face emoji72">女士</a><a title="男士" type="emoji" class="face emoji73">男士</a><a title="天使" type="emoji" class="face emoji74">天使</a><a title="骷髅" type="emoji" class="face emoji75">骷髅</a><a title="红唇" type="emoji" class="face emoji76">红唇</a><a title="太阳" type="emoji" class="face emoji77">太阳</a><a title="下雨" type="emoji" class="face emoji78">下雨</a><a title="多云" type="emoji" class="face emoji79">多云</a><a title="雪人" type="emoji" class="face emoji80">雪人</a><a title="月亮" type="emoji" class="face emoji81">月亮</a><a title="闪电" type="emoji" class="face emoji82">闪电</a><a title="海浪" type="emoji" class="face emoji83">海浪</a><a title="猫" type="emoji" class="face emoji84">猫</a><a title="小狗" type="emoji" class="face emoji85">小狗</a><a title="老鼠" type="emoji" class="face emoji86">老鼠</a><a title="仓鼠" type="emoji" class="face emoji87">仓鼠</a><a title="兔子" type="emoji" class="face emoji88">兔子</a><a title="狗" type="emoji" class="face emoji89">狗</a><a title="青蛙" type="emoji" class="face emoji90">青蛙</a><a title="老虎" type="emoji" class="face emoji91">老虎</a><a title="考拉" type="emoji" class="face emoji92">考拉</a><a title="熊" type="emoji" class="face emoji93">熊</a><a title="猪" type="emoji" class="face emoji94">猪</a><a title="牛" type="emoji" class="face emoji95">牛</a><a title="野猪" type="emoji" class="face emoji96">野猪</a><a title="猴子" type="emoji" class="face emoji97">猴子</a><a title="马" type="emoji" class="face emoji98">马</a><a title="蛇" type="emoji" class="face emoji99">蛇</a><a title="鸽子" type="emoji" class="face emoji100">鸽子</a><a title="鸡" type="emoji" class="face emoji101">鸡</a><a title="企鹅" type="emoji" class="face emoji102">企鹅</a><a title="毛虫" type="emoji" class="face emoji103">毛虫</a><a title="章鱼" type="emoji" class="face emoji104">章鱼</a><a title="鱼" type="emoji" class="face emoji105">鱼</a><a title="鲸鱼" type="emoji" class="face emoji106">鲸鱼</a><a title="海豚" type="emoji" class="face emoji107">海豚</a><a title="玫瑰" type="emoji" class="face emoji108">玫瑰</a><a title="花" type="emoji" class="face emoji109">花</a><a title="棕榈树" type="emoji" class="face emoji110">棕榈树</a><a title="仙人掌" type="emoji" class="face emoji111">仙人掌</a><a title="礼盒" type="emoji" class="face emoji112">礼盒</a><a title="南瓜灯" type="emoji" class="face emoji113">南瓜灯</a><a title="圣诞老人" type="emoji" class="face emoji114">圣诞老人</a><a title="圣诞树" type="emoji" class="face emoji115">圣诞树</a><a title="铃" type="emoji" class="face emoji116">铃</a><a title="气球" type="emoji" class="face emoji117">气球</a><a title="CD" type="emoji" class="face emoji118">CD</a><a title="相机" type="emoji" class="face emoji119">相机</a><a title="录像机" type="emoji" class="face emoji120">录像机</a><a title="电脑" type="emoji" class="face emoji121">电脑</a><a title="电视" type="emoji" class="face emoji122">电视</a><a title="电话" type="emoji" class="face emoji123">电话</a><a title="解锁" type="emoji" class="face emoji124">解锁</a><a title="锁" type="emoji" class="face emoji125">锁</a><a title="钥匙" type="emoji" class="face emoji126">钥匙</a><a title="成交" type="emoji" class="face emoji127">成交</a><a title="灯泡" type="emoji" class="face emoji128">灯泡</a><a title="邮箱" type="emoji" class="face emoji129">邮箱</a><a title="浴缸" type="emoji" class="face emoji130">浴缸</a><a title="钱" type="emoji" class="face emoji131">钱</a><a title="炸弹" type="emoji" class="face emoji132">炸弹</a><a title="手枪" type="emoji" class="face emoji133">手枪</a><a title="药丸" type="emoji" class="face emoji134">药丸</a><a title="橄榄球" type="emoji" class="face emoji135">橄榄球</a><a title="篮球" type="emoji" class="face emoji136">篮球</a><a title="足球" type="emoji" class="face emoji137">足球</a><a title="棒球" type="emoji" class="face emoji138">棒球</a><a title="高尔夫" type="emoji" class="face emoji139">高尔夫</a><a title="奖杯" type="emoji" class="face emoji140">奖杯</a><a title="入侵者" type="emoji" class="face emoji141">入侵者</a><a title="唱歌" type="emoji" class="face emoji142">唱歌</a><a title="吉他" type="emoji" class="face emoji143">吉他</a><a title="比基尼" type="emoji" class="face emoji144">比基尼</a><a title="皇冠" type="emoji" class="face emoji145">皇冠</a><a title="雨伞" type="emoji" class="face emoji146">雨伞</a><a title="手提包" type="emoji" class="face emoji147">手提包</a><a title="口红" type="emoji" class="face emoji148">口红</a><a title="戒指" type="emoji" class="face emoji149">戒指</a><a title="钻石" type="emoji" class="face emoji150">钻石</a><a title="咖啡" type="emoji" class="face emoji151">咖啡</a><a title="啤酒" type="emoji" class="face emoji152">啤酒</a><a title="干杯" type="emoji" class="face emoji153">干杯</a><a title="鸡尾酒" type="emoji" class="face emoji154">鸡尾酒</a><a title="汉堡" type="emoji" class="face emoji155">汉堡</a><a title="薯条" type="emoji" class="face emoji156">薯条</a><a title="意面" type="emoji" class="face emoji157">意面</a><a title="寿司" type="emoji" class="face emoji158">寿司</a><a title="面条" type="emoji" class="face emoji159">面条</a><a title="煎蛋" type="emoji" class="face emoji160">煎蛋</a><a title="冰激凌" type="emoji" class="face emoji161">冰激凌</a><a title="蛋糕" type="emoji" class="face emoji162">蛋糕</a><a title="苹果" type="emoji" class="face emoji163">苹果</a><a title="飞机" type="emoji" class="face emoji164">飞机</a><a title="火箭" type="emoji" class="face emoji165">火箭</a><a title="自行车" type="emoji" class="face emoji166">自行车</a><a title="高铁" type="emoji" class="face emoji167">高铁</a><a title="警告" type="emoji" class="face emoji168">警告</a><a title="旗" type="emoji" class="face emoji169">旗</a><a title="男人" type="emoji" class="face emoji170">男人</a><a title="女人" type="emoji" class="face emoji171">女人</a><a title="O" type="emoji" class="face emoji172">O</a><a title="X" type="emoji" class="face emoji173">X</a><a title="版权" type="emoji" class="face emoji174">版权</a><a title="注册商标" type="emoji" class="face emoji175">注册商标</a><a title="商标" type="emoji" class="face emoji176">商标</a>
                        </div>
                    </div>

                </div><div class="scroll-element scroll-x"><div class="scroll-element_corner"></div><div class="scroll-arrow scroll-arrow_less"></div><div class="scroll-arrow scroll-arrow_more"></div><div class="scroll-element_outer">    <div class="scroll-element_size"></div>    <div class="scroll-element_inner-wrapper">        <div class="scroll-element_inner scroll-element_track">            <div class="scroll-element_inner-bottom"></div>        </div>    </div>    <div class="scroll-bar" style="width: 96px;">        <div class="scroll-bar_body">            <div class="scroll-bar_body-inner"></div>        </div>        <div class="scroll-bar_bottom"></div>        <div class="scroll-bar_center"></div>    </div></div></div><div class="scroll-element scroll-y"><div class="scroll-element_corner"></div><div class="scroll-arrow scroll-arrow_less"></div><div class="scroll-arrow scroll-arrow_more"></div><div class="scroll-element_outer">    <div class="scroll-element_size"></div>    <div class="scroll-element_inner-wrapper">        <div class="scroll-element_inner scroll-element_track">            <div class="scroll-element_inner-bottom"></div>        </div>    </div>    <div class="scroll-bar" style="height: 96px;">        <div class="scroll-bar_body">            <div class="scroll-bar_body-inner"></div>        </div>        <div class="scroll-bar_bottom"></div>        <div class="scroll-bar_center"></div>    </div></div></div></div>
            </div>
        </div>
    </script>

    <link rel="stylesheet" href="/assets/style/face.css">
    <link rel="stylesheet" href="/assets/style/cs_work.css">
    <script type="text/javascript" src="/assets/js/emoji.js"></script>
    <script type="text/javascript" src="/assets/js/cs_work.js?t=17"></script>
    <script type="text/javascript" src="/assets/js/swfobject.js"></script>
    <script type="text/javascript" src="/assets/js/web_socket.js"></script>
    <script type="text/javascript" src="/assets/js/jquery.min.js"></script>

    <script type="text/javascript">
        if (typeof console == "undefined") {    this.console = { log: function (msg) {  } };}
        // 如果浏览器不支持websocket，会使用这个flash自动模拟websocket协议，此过程对开发者透明
        WEB_SOCKET_SWF_LOCATION = "/assets/swf/WebSocketMain.swf";
        // 开启flash的websocket debug
        WEB_SOCKET_DEBUG = true;
        var ws;
        var reTryNum = 0;

        // 连接服务端
        function connect() {
            // 创建websocket
            ws = new WebSocket("ws://47.75.156.177:7272");
            // 当socket连接打开时，输入用户名
            ws.onopen = onopen;
            // 当有消息时根据消息类型显示不同信息
            ws.onmessage = onmessage;
            ws.onclose = function() {
                reTryNum++;
                if (reTryNum <= 10) {
                    setTimeout(function(){
                        console.log("连接关闭，定时重连");
                        connect();
                    }, 5000);
                }
            };
            ws.onerror = function() {
                console.log("出现错误");
            };
        }

        function ping() {
            console.log("ping");
            var login_data = '{"type":"ping"}';
            ws.send(login_data);
            setTimeout(function(){
                ping();
            }, 30000);
        }

        // 连接建立时发送信息
        function onopen()
        {
            reTryNum = 0;
            var login_data = '{"type":"web_init","user_id":"1006_1606"}';
            console.log("websocket握手成功，发送登录数据:"+login_data);
            ws.send(login_data);

            ping();
        }

        // 服务端发来消息时
        function onmessage(e)
        {
            console.log(e.data);
            var data = JSON.parse(e.data);
            switch(data['type']){
                // 服务端ping客户端
                case 'ping':
                    ws.send('{"type":"pong"}');
                    break;

                // 初始化
                case 'init':
                    //{"type":"web_init","client_id":xxx,"client_name":"xxx","time":"xxx"}
                    $.post('/cs_work/bind', {client_id: data['client_id']}, function(data){}, 'json');
                    console.log(data['client_id']+"初始化成功，并绑定UID");
                    break;

                // 收到好友信息
                case 'new_msg':
                    //{"type":"say","from_client_id":xxx,"to_client_id":"all/client_id","content":"xxx","time":"xxx"}
                    new_msg(data, true);
                    break;

                // 收到陌生人消息
                case 'new_stranger':
                    //{"type":"say","from_client_id":xxx,"to_client_id":"all/client_id","content":"xxx","time":"xxx"}
                    newStranger(data);
                    break;
            }
        }
        window.onload =  connect();
    </script>
</body>
</html><!--            <div class="layui-footer">-->
<!-- 底部固定区域 -->
<!--            </div>-->
</div>
<script>
    //JavaScript代码区域
    layui.use('element', function(){
        var $ = layui.$
            , element = layui.element;

        var autodivheight = function (){ //函数：获取尺寸
            //获取浏览器窗口高度
            var winHeight=0;
            if (window.innerHeight)
                winHeight = window.innerHeight;
            else if ((document.body) && (document.body.clientHeight))
                winHeight = document.body.clientHeight;
            //通过深入Document内部对body进行检测，获取浏览器窗口高度
            if (document.documentElement && document.documentElement.clientHeight)
                winHeight = document.documentElement.clientHeight;
            //DIV高度为浏览器窗口的高度
            var height = (winHeight-60-43-10);
//            document.getElementById("LAY_wechat_content").style.height= height +"px";
            $('.layui-card-body').css('height', height);
            $('.layui-card-body').css('overflow-y', 'auto');
        };
        autodivheight();
        window.onresize=autodivheight;
    });
</script>
</body>
</html>
